<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl-pl" lang="pl-pl">

<!-- 
 * Simplex Admin Template - Version 1.0
 *
 * Copyright 2011, Prosoftware.pl Dominik Cwiklik
 * @see http://www.prosoftware.pl/simplex-admin-template/
 * @license MIT http://www.opensource.org/licenses/mit-license.php
 *
 * Includes jQuery | http://jquery.com/ | Copyright 2011, John Resig | Dual licensed under the MIT or GPL Version 2 licenses.
 * Includes Uni-form | http://sprawsm.com/uni-form/ | Copyright (c) 2010, Dragan Babic | Released under the MIT License.
 * Includes Facebox | http://defunkt.io/facebox/ | Copyright (c) 2007/2008 Chris Wanstrath  | Released under the MIT License.
 *
 * Date: Fri Mar 25 00:29:24 2011
-->

<head>
	<title>Simplex Admin Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css" media="screen">@import "css/simplex.pack-default.css";</style>
</head>

<body>

	<div id="container" class="hide-sidebar">
		
		<div id="header">
			
			<div id="header-right">
				<ul class="clearfix">
					<li class="first">Logged as <a href="#">username</a></li>
					<li class="inside"><a href="#">Settings</a></li>
					<li class="inside"><a href="#">Messages</a><span class="hotCount"><a href="#" title="You have 4 unread messages.">4</a></span></li>
					<li class="last"><a href="index.html">Logout</a></li> 
				</ul>
			</div> 
			
			<div id="logo">
				<div class="logoAsText"><a href="demo.html">Simplex Admin</a></div>
			</div> 
			
			<div id="top-nav">
			
				<ul>
					<li class="t"><a href="demo.html">Homepage</a></li>
					<li class="t hasChilds"><a href="">More</a>
					
						<ul class="top-nav-sub">
							<li><a href="forms.html">Other forms</a></li>
						</ul>
					
					</li>
				</ul>
				
			</div>
			
		</div>
		
		<div id="content">
		
			<h1 class="title">We love UniForm!</h1>
		
			<div class="round">
			    <div class="round-head">
					<h2>Big form (+validation)</h2>
				</div>
			
				<div class="round-content">
					<form id="validationForm" action="#" class="uniForm">
							
					  <fieldset>
						<h3>Client side form demonstration</h3>
						
						<div class="ctrlHolder">
						  <label for=""><em>*</em> Your name</label>
						  <input name="name" id="name" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required"/>
						  <p class="formHint">Required element</p>
						</div>
						
						<div class="ctrlHolder">
						  <label for=""><em>*</em> Your email</label>
						  <input name="email" id="email" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required validateEmail"/>
						  <p class="formHint">A valid email address</p>
						</div>
					  
						<div class="ctrlHolder">
						  <label for=""><em>*</em> Email confirm</label>
						  <input name="email_confirm" id="email_confirm" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required validateSameAs email"/>
						  <p class="formHint"></p>
						</div>
						
						<div class="ctrlHolder">
						  <label for=""><em>*</em> A number from 10 - 50</label>
						  <input name="a_number" id="a_number" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required validateInteger validateMin val-10 validateMax val-50"/>
						  <p class="formHint">A random number that you like</p>
						</div>
	
						<div class="ctrlHolder">
						  <p class="label"><em>*</em> Your preferred color</p>
						  <ul class="blockLabels">
							<li><label for=""><input type="radio" name="color" class="required"> Red</label></li>
							<li><label for=""><input type="radio" name="color" class="required"> Green</label></li>
							<li><label for=""><input type="radio" name="color" class="required"> Blue</label></li>
						  </ul>
						  <p class="formHint">Select a color</p>
						</div>
	
						<div class="ctrlHolder">
						  <p class="label">Privacy agreement</p>
						  <ul class="blockLabels">
							<li><label for=""><input type="checkbox" name="agreement" class="required"> I have read the agreement</label></li>
						  </ul>
						</div>
	
					  </fieldset>
					  
					  <div class="buttonHolder">
						<button type="submit" class="secondaryAction">← Cancel and go back</button>
						<button type="submit" class="primaryAction">Submit</button>
					  </div>
	
					</form>
				</div>
			</div>
			
			<div class="round">
			    
				<div class="round-head">
					<h2>Big form (readonly, preview after send)</h2>
				</div>
			
				<div class="round-content">
				
					<form action="#" class="uniForm">
					  
					  <div id="okMsg">
						<p>
						  Looks like everything went OK! Check the data you entered and if everything is OK press the button to proceed.
						</p>
					  </div>
							
					  <fieldset>
						<h3>Default Form Field Layout</h3>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Label of the input field</h4>
						  <div class="readOnly">User–input value</div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Label of the textarea</h4>
						  <div class="readOnly">User–input value that contains a lot of text, like the output of a textarea that will have the text span multiple lines.</div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Label of the select box</h4>
						  <div class="readOnly">
							<span class="choiceLabel">You chose:</span>
							Selected option's text
						  </div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Name of the radio group</h4>
						  <div class="readOnly">
							<span class="choiceLabel">You chose:</span>
							Label of the selected radio button
						  </div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Name of the multifield group</h4>
						  <div class="readOnly">
							<span class="choiceLabel">Input label:</span>
							<span class="choice">User–Input value</span>
						  </div>
						  <div class="readOnly">
							<span class="choiceLabel">Input label:</span>
							<span class="choice">User–Input value</span>
						  </div>
						</div>
						
					  </fieldset>
					  
					  <fieldset class="inlineLabels">
						<h3>Alternate Form Fields Layout</h3>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Label of the input field</h4>
						  <div class="readOnly">User–input value</div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Label of the textarea</h4>
						  <div class="readOnly">User–input value that contains a lot of text, like the output of a textarea that will have the text span multiple lines.</div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Label of the select box</h4>
						  <div class="readOnly">
							<span class="choiceLabel">You chose:</span>
							Selected option's text
						  </div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Name of the checkbox group</h4>
						  <div class="readOnly">
							<span class="choiceLabel">You chose:</span>
							Label of the selected checkbox
						  </div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Name of the radio group</h4>
						  <div class="readOnly">
							<span class="choiceLabel">You chose:</span>
							Label of the selected radio button
						  </div>
						</div>
						
						<div class="ctrlHolder">
						  <h4 class="readOnlyLabel">Name of the multifield group</h4>
						  <div class="readOnly">
							<span class="choiceLabel">Input label:</span>
							<span class="choice">User–Input value</span>
						  </div>
						  <div class="readOnly">
							<span class="choiceLabel">Input label:</span>
							<span class="choice">User–Input value</span>
						  </div>
						  <div class="readOnly">
							<span class="choiceLabel">Input label:</span>
							<span class="choice">User–Input value</span>
						  </div>
						</div>
						
					  </fieldset>
		
					  <div class="buttonHolder">
						<button type="submit" class="secondaryAction">← Go back to correct some information</button>
						<button type="submit" class="primaryAction">Submit</button>
					  </div>
		
					</form>
			
				</div>
				
			</div>

			<div class="clear"></div>	

		</div>
		<!-- #content end -->
		
		<br class="clear" />
		
		<div id="footer">
			<div class="float-left">&copy; 2011 Prosoftware.pl</div>
			<div class="float-right"><a href="" class="backtotop">Scroll to top</a></div>
			<div class="clear"></div>
		</div>
		
	</div>


	<!-- scripts -->
	<script src="js/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
	<script src="js/jquery/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.cookie.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.tipsy.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.simplyscroll-1.0.4.min.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.mousewheel-3.0.4.pack.js" type="text/javascript" ></script>
	<script src="js/jquery/jquery.fancybox-1.3.4.pack.js" type="text/javascript" ></script>
	<script src="js/facebox/facebox.js" type="text/javascript"></script>
	<script src="js/uni-form/uni-form-validation.jquery.min.js" type="text/javascript" ></script>
	
	<script src="js/simplex.sidebar.js" type="text/javascript"></script>
	<script src="js/simplex.default.js" type="text/javascript"></script>
	<!-- /scripts -->

</body>
</html>